<template>
  <div class="home">
    <Navbar class="home-nav"><div slot="center">购物街</div></Navbar>

    <!-- 轮播图 -->
    <HomeSwiper :banners="banners"></HomeSwiper>
    <!-- 推荐 -->
    <HomeRecommend :recommends="recommends"></HomeRecommend>
    <!-- 本周流行 -->
    <Feature></Feature>
    <!-- 二级导航 -->
    <SecondClass
      :left="secondclass.left"
      :center="secondclass.center"
      :right="secondclass.right"
      class="secondClass"
    ></SecondClass>
  </div>
</template>

<script>
import Navbar from '../../components/Navbar.vue'
import HomeSwiper from './children/HomeSwiper.vue'
import HomeRecommend from './children/HomeRecommend.vue'
import Feature from './children/Feature.vue'
import SecondClass from '../../components/SecondClass.vue'

export default {
  data() {
    return {
      banners: [],
      recommends: [],
      secondclass: {
        left: '流行',
        center: '新款',
        right: '精品'
      }
    }
  },
  components: {
    Navbar,
    HomeSwiper,
    HomeRecommend,
    Feature,
    SecondClass
  },
  created() {
    // 请求list和banner的数据
    this.$axios.get('/home/multidata').then((res) => {
      this.banners = res.data.data.banner.list
      this.recommends = res.data.data.recommend.list
      console.log(res)
    })
  }
}
</script>

<style scoped>
.home-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.secondClass {
  top: 44px;
  background-color: #fff;
  z-index: 9;
}
</style>
